<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <el-form ref="form" :model="orderForm">
          <el-row :gutter="20" type="flex" justify="space-between">
            <el-col :span="8" style="padding-left: 58px; padding-right: 15px">
              <el-form-item label="运单编号：" style="height: 40px">
                <el-input
                  v-model="orderForm.id"
                  placeholder="请输入运单编号"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="padding-left: 58px; padding-right: 15px">
              <el-form-item label="订单编号：">
                <el-input
                  v-model="orderForm.password"
                  placeholder="请输入订单编号"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="padding-left: 58px; padding-right: 15px">
              <el-form-item label="调度状态：">
                <el-select
                  v-model="orderForm.paymentStatus"
                  placeholder="请选择"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="space-between">
            <el-col :span="8" style="padding-left: 45px; padding-right: 15px">
              <el-form-item label="起始地机构：" style="height: 40px">
                <el-select
                  v-model="orderForm.senderName"
                  placeholder="请输入选择起始地机构"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="padding-left: 45px; padding-right: 15px">
              <el-form-item label="目的地机构:">
                <el-input
                  v-model="orderForm.senderPhone"
                  placeholder="请输入选择目的地机构"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="padding-left: 45px; padding-right: 15px">
              <el-form-item label="当前所在机构:">
                <el-input
                  v-model="orderForm.senderPhone"
                  placeholder="请输入选择当前所在机构"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="padding-left: 35px; padding-right: 15px">
            <el-button type="warning">搜索</el-button>
            <el-button>重置</el-button>
          </el-row>
        </el-form>
      </el-card>

      <div class="tableForm">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :row-style="{ height: '48px' }"
        >
          <el-table-column prop="date" label="序号" width="100" />
          <el-table-column prop="name" label="订单编号" width="200" />
          <el-table-column prop="province" label="运单编号" width="300" />
          <el-table-column prop="city" label="下单时间" width="250" />
          <el-table-column prop="address" label="订单状态" width="300" />
          <el-table-column prop="zip" label="发件人姓名" width="230" />
          <el-table-column prop="zip" label="发件人电话" width="230" />
          <el-table-column prop="zip" label="发件人地址" width="230" />
          <el-table-column prop="zip" label="收件人姓名" width="230" />
          <el-table-column prop="zip" label="收件人电话" width="230" />
          <el-table-column prop="zip" label="收件人地址" width="230" />
          <el-table-column prop="zip" label="取件类型" width="230" />
          <el-table-column prop="zip" label="付费类型" width="230" />

          <el-table-column
            fixed="right"
            label="操作"
            width="120"
            align="center"
          >
            <template>
              <el-button
                class="workfw"
                type="text"
                size="small"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          />
        </div>
      </div>
      <div class="footer">
        <span> 江苏传智播客教育科技股份有限公司 </span>
        <span> 版权所有Copyright 2006-2022 All Rights Reserved </span>
        <span> 苏ICP备16007882号-11 </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WaybillPage',
  data() {
    return {
      orderForm: {
        // 订单编号(不确定)
        id: '',
        // 订单状态
        status: '',
        // 付费状态
        paymentStatus: '',
        // 发件人名字
        senderName: '',
        // 发件人电话
        senderPhone: '',
        // 发件人省
        senderProvinceId: '',
        // 发件人市
        senderCityId: '',
        // 发件人区
        senderCountyId: '',
        // 收件人名字
        receiverName: '',
        // 收件人电话
        receiverPhone: '',
        // 收件人省
        receiverProvinceId: '',
        // 收件人市
        receiverCityId: '',
        // 收件人区
        receiverCountyId: ''
      },
      tableData: [
        {
          date: '1',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        },
        {
          date: '3',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        },
        {
          date: '4',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        },
        {
          date: '5',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        },
        {
          date: '6',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        },
        {
          date: '7',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        },
        {
          date: '8',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        },
        {
          date: '9',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        },
        {
          date: '10',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  },
  methods: {
    onSubmit() {
      console.log('submit')
    }
  }
}
</script>

<style lang="scss">
.app-container {
  padding: 20px;
  background-color: #f3f4f7;
  padding-top: 23px;
  .box-card {
  // padding: 20px 20px 20px 0;
  min-width: 1196px;
  height: 260px;
  .el-card__body {
    padding: 20px 20px 20px 0;
  }
  // padding: 20px 0;
  .el-form-item__content {
    display: flex;
    justify-content: space-between;
    width: 70%;
  }
  .el-form-item__label {
    padding: 0 12px 0 10px;
    font-weight: 400;
    color: #000;
  }
  .el-button {
    padding: 10px 20px;
    width: 88px;
    // background-color: #e15536;
  }
}
}
.demo-form-inline {
  width: 100%;
  background-color: #fff;
  padding: 20px 20px 20px 0;
  min-width: 1116px;
  overflow: hidden;

  .form-item {
    margin-right: 0;
    color: #000;

    padding: 0 25px;
    font-size: 14px;
    width: 33.33%;
    overflow: hidden;
    position: relative;
    .el-input__inner {
      width: 70%;
      margin-left: 95px;
      min-width: 210px;
    }
    .el-input__suffix {
      position: absolute;
      height: 100%;
      right: 95px;
      top: 0;
      text-align: center;
      color: #c0c4cc;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      pointer-events: none;

    }
    .el-form-item__label {
      position: absolute;
      left: 0;
      top: 0;
      padding-left: 10px;
      font-weight: 400;
      width: 120px;
    }
    .button {
      width: 90px;
      height: 40px;
    }
  }
}

.tableForm {
  min-width: 1116px;
  margin-top: 20px;
  background-color: #fff;
  height: 694px;
  padding: 28px;
  .el-table {
    border: 1px solid #ebeef5;
    font-size: 13px;
  }
}

.workfw {
  color: #419eff;
}
th {
  background-color: #f8faff !important;
  font-size: 14px;
}
.el-table__body td {
  padding: 0;
}
.el-table thead tr th:first-child .cell {
  padding-left: 20px;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 12px; /*滚动条宽度*/
  height: 12px; /*滚动条高度*/
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 15px; /*滚动条的背景区域的圆角*/
  //  -webkit-box-shadow:  #dddee0;
  background-color: #fff; /*滚动条的背景颜色*/
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 15px; /*滚动条的圆角*/
  //  -webkit-box-shadow:  #dddee0;
  background-color: #dddee0; /*滚动条的背景颜色*/
}
.block {
  margin-top: 25px !important;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #20232a;
}
.footer {
  font-size: 14px;
  color: rgb(186, 192, 205);
  text-align: center;
  padding-bottom: 20px;
  background-color: rgb(243, 244, 247);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 20px;
  span {
    padding: 0 10px;
  }
}
.one{
    .el-input{
        input{
            width: 80px !important;
            min-width: 80px !important;
        }
    }
}
.tow{
    width:125px;
    .el-input{
        input{
            width: 20% !important;
            margin-left: 0px !important;
            min-width: 125px !important;
        }
        .el-input__suffix{
            right:0px !important;
        }
    }
}
</style>
